<template>
  <div class="full-width full-height padding-20 flex">
    <img src="statics/img/banner.png" height="208">
    <div class="flex-1 padding-l-20" style="margin-right: -20px">
      <q-scroll-area class="full-height full-width padding-r-20" :thumb-style="thumbStyle">
        <div class="flex justify-between items-center notice-item cursor-pointer" v-for="(item, index) in noticeList" :key="index">
          <div class="flex items-center" style="max-width: calc(100% - 72px)" @click="noticeDetail(item, index)">
            <div class="tips"></div>
            <div class="flex items-center" style="width: calc(100% - 20px)">
              <div class="text-ellipsis" style="max-width: calc(100% - 56px)">{{item.title}}</div>
              <div class="readed read" v-if="item.read">已读</div>
              <div class="read" v-else>未读</div>
            </div>
          </div>
          <div class="font-size-14 text-grey">{{item.createDate}}</div>
          <q-tooltip>{{item.title}}</q-tooltip>
        </div>
      </q-scroll-area>
    </div>
    <notice-detail
      ref="noticeDetail"
      :show="showDetail"
      @readNotice="readNotice"
      @close="showDetail = false"
    />
  </div>
</template>

<script>
import NoticeDetail from './notice-detail'
import { getNoticeNews } from 'src/boot/home/home-new'
export default {
  name: 'notice',
  components: {
    NoticeDetail
  },
  data () {
    return {
      // 滚动条样式
      thumbStyle: this.CommonConfig.thumbStyle,
      noticeList: [],
      showDetail: false,
      selTitle: '',
      selDetail: '',
      pageNum: 1, // 当前页数
      pageSize: 10 // 每页多少条
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      let params = {
        category: 'BULLETIN',
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      getNoticeNews(params).then(res => {
        console.log(res)
        this.noticeList = res.data.records
      })
    },
    // 公告已读
    readNotice (index) {
      this.noticeList[index].read = true
    },
    // 显示详情
    noticeDetail (item, index) {
      this.showDetail = true
      this.$refs.noticeDetail.initData(item.id, item.title, index)
    }
  }
}
</script>

<style scoped lang="stylus">
  .padding-20{
    padding 20px
  }
  .text-grey{
    color #999
  }
  .notice-item{
    line-height 2
    margin-bottom 20px
    &:last-child{
      margin 0
    }
  }
  .tips{
    width 10px
    height 10px
    background #F7B82D
    border-radius 50%
    margin-right 10px
  }
  .read{
    width 36px
    height 16px
    border-radius 8px 0px 8px 8px
    color #fff
    text-align center
    line-height 16px
    background-color #5F77FD
    font-size 12px
    margin 0 10px
    &.readed{
      background-color #999
    }
  }
</style>
